葫芦的运维日志_cssjshtml_vue.js methods 和 computed区别

葫芦的运维日志

浏览量 4505

2019/01/02 11:56

1.打开浏览器开发者模式，点击按钮Add to A:

Add to A
Add to B

2.点击按钮Add to B:

Add to A
Add to B

methods方法会将methods里面的两个方法函数都去执行。

3.点击按钮Add to C:

Add to A
Add to B
Add to C

4.点击按钮Add to D:

Add to A
Add to B
Add to D

computed只会执行自己对应的方法，但是也会带上methods里面的方法。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>methods_and_computed</title>
</head>
<body>
<div id="vue-app">

    <h1>Methods</h1>
    <button v-on:click="a++">Add to A</button>
    <button v-on:click="b++">Add to B</button>
    <p>A - {{ a }} </p>
    <p>B - {{ b }} </p>
    <p>Age + A = {{ addToA()}}
    <p>Age + B = {{ addToB()}}
    <h1>Computed</h1>
    <button v-on:click="c++">Add to C</button>
    <button v-on:click="d++">Add to D</button>
    <p>C - {{ c }} </p>
    <p>D - {{ d }} </p>
    <p>Age + C = {{ addToC }}
    <p>Age + D = {{ addToD }}
</div>

<script src="/static/js/vue.min.js"></script>
<script>
    new Vue({
        el: "#vue-app",
        data: {
            a: 0,
            b: 0,
            c: 0,
            d: 0,
            age: 20
        },
        methods: {
            addToA: function () {
                console.log("Add to A");
                return this.a + this.age;
            },
            addToB: function () {
                console.log("Add to B");
                return this.b + this.age;
            }
        },
        computed: {
            addToC: function () {
                console.log("Add to C");
                return this.c + this.age;

            },
            addToD: function () {
                console.log("Add to D");
                return this.d + this.age;

            }

        }


    });
</script>
</body>
</html>

葫芦的运维日志

打赏